<template>
  <div ref="candyChart" style="height: 100%" />
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: 'CandyChart',
  components: {},
  props: {
    optionData: Array,
    isActive: {
      type: Boolean,
      default: false
    },
    index: Number,
    change: Boolean,
    text: String
  },
  data() {
    return {
      chart: null
    };
  },
  watch: {
    // change: function() {
    //   this.monitorClick();
    // },
    optionData() {
      this.option = this.getCandyData(this.optionData);
      this.chart.setOption(this.option);
    }
  },
  created() {
    // this.calculateTotal();
  },
  mounted() {
    this.$nextTick(function() {
      this.init();
    });
  },
  methods: {
    init() {
      // 构建糖果图
      this.chart = echarts.init(this.$refs.candyChart);
      // 传入数据生成 option
      this.option = this.getCandyData(this.optionData);
      this.chart.setOption(this.option);
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
